@include("system::admin.layouts._header")
<body>
<style>
    #spec-table th {
        text-align: center;
    }
</style>
<script>
    var specArray = {!! json_encode($specArray, JSON_UNESCAPED_UNICODE) !!};
</script>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form" method="post">

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>商品图册</li>
                <li>规格配置</li>
                <li>移动端详情</li>
                <li>自定义配置</li>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item  layui-row layui-col-xs12">
                        <label class="layui-form-label required">商品分类</label>
                        <div class="layui-input-block">
                            <select name="category_id" id="category_id" lay-filter="category_id">
                                <option value="0">选择商品分类</option>
                                @foreach($categories as $item)
                                    <option value="{{$item['id']}}"
                                            @if($item['id']==$goods->category_id) selected @endif>{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="goods_name" class="layui-input" lay-verify="required"
                                   lay-reqtext="请输入名称" placeholder="请输入名称" value="{{$goods->goods_name}}">
                            <tip>填写名称。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">短标题</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="attr[ident][]" value="short_title">
                            <input type="text" name="attr[value][]" class="layui-input"
                                   placeholder="请输入短标题" value="{{$goods->short_title}}">
                            <tip>填写短标题。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">主图</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="goods_image" class="layui-input layui-col-xs6" placeholder="请上传主图"
                                   value="{{$goods->goods_image}}">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="goods_image" data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">售价</label>
                        <div class="layui-input-block">
                            <input type="text" name="shop_price" class="layui-input" lay-verify="required"
                                   lay-reqtext="请输入售价" placeholder="请输入售价" value="{{$goods->shop_price}}">
                            <tip>填写售价。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">市场价</label>
                        <div class="layui-input-block">
                            <input type="text" name="market_price" class="layui-input" lay-reqtext="请输入市场价"
                                   placeholder="请输入市场价" value="{{$goods->market_price}}">
                            <tip>填写市场价。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">库存</label>
                        <div class="layui-input-block">
                            <input type="text" name="stock" class="layui-input" lay-reqtext="请输入库存"
                                   placeholder="请输入库存" value="{{$goods->stock}}">
                            <tip>填写库存。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea name="description" class="layui-textarea"
                                      placeholder="请输入描述">{{$goods->description}}</textarea>
                            <tip>填写描述。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">属性</label>
                        <div class="layui-input-block">
                            @foreach($attributes as $item)
                                <input type="hidden" name="attr[ident][]" value="{{$item['ident']}}">
                                <input type="checkbox" name="attr[value][]" @if($goods->{$item['ident']} == 1) checked
                                       @endif lay-skin="primary" value="1" title="{{$item['name']}}">
                            @endforeach
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">详情</label>
                        <div class="layui-input-block">
                            <textarea id="content" name="content" rows="20" class="layui-textarea editor"
                                      placeholder="请输入内容">{{$goods->content}}</textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item" id="albums-tab">
                    @foreach($goods->goods_albums as $key => $albums)
                    <div class="layui-card">
                        <div class="layui-card-header">商品图册<a href="javascript:"
                                                                  style="color: #1e9fff;margin-left: 5px;"
                                                                  class="delete-item">[ - ]</a></div>
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">图片</label>
                                <div class="layui-input-block layuimini-upload">
                                    <input name="goods_albums[{{$key}}]" class="layui-input layui-col-xs6"
                                           placeholder="请上传商品图册" value="{{$albums->goods_image}}">
                                    <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="goods_albums[{{$key}}]" data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    <div class="layui-form-item" id="albums-button">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" id="add-albums-button"
                                    class="layui-btn layui-btn-primary layui-btn-sm">
                                增加图片 +
                            </button>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">

                    @foreach($specItems as $sk => $spec)
                        <div class="layui-card">
                            <div class="layui-card-header">商品规格项<a href="javascript:"
                                                                        style="color: #1e9fff;margin-left: 5px;"
                                                                        class="delete-spec-item">[ - ]</a></div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">

                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">规格名</label>
                                        <div class="layui-inline">
                                            <div class="layui-input-inline">
                                                <input type="text" name="spec[{{$spec['id']}}]" class="layui-input spec-item" data-num="{{$spec['id']}}"
                                                       placeholder="规格名称" value="{{$spec['name']}}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">规格值</label>
                                        <div class="layui-inline specVal">
                                            @foreach($spec['values'] ?: [] as $value)
                                                <div class="layui-input-inline">
                                                    <input type="text" name="specVal[{{$spec['id']}}][{{$value['id']}}]" readonly data-id="{{$spec['id']}}" class="layui-input"
                                                           placeholder="规格值"
                                                           value="{{$value['value']}}">
                                                </div>
                                            @endforeach
                                                <div class="layui-input-inline">
                                                    <input type="text" name="specVal[{{$spec['id']}}][]" data-id="{{$spec['id']}}" class="layui-input"
                                                           placeholder="规格值"
                                                           value="">
                                                </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-block">
                                            <button type="button"
                                                    class="add-spec-val-btn layui-btn layui-btn-primary layui-btn-sm">
                                                新增规格值
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="layui-form-item" id="spec-button">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" id="add-spec-button" class="layui-btn layui-btn-primary layui-btn-sm">
                                新增规格 +
                            </button>

                            <button type="button" id="make-spec-button"
                                    class="layui-btn layui-btn-primary layui-btn-sm">
                                刷新规格
                            </button>
                        </div>
                    </div>

                    <div class="layui-form">
                        <table class="layui-table" id="spec-table" style="display: none">

                        </table>
                    </div>

                </div>
                <div class="layui-tab-item" id="mobile-tab">

                    @foreach($mobileImages as $key => $image)
                        <div class="layui-card">
                            <div class="layui-card-header">详情图片<a href="javascript:"
                                                                      style="color: #1e9fff;margin-left: 5px;"
                                                                      class="delete-spec-item">[ - ]</a></div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">图片</label>
                                    <div class="layui-input-block layuimini-upload">
                                        <input name="mobile_images[{{$key}}]" class="layui-input layui-col-xs6"
                                               placeholder="请上传详情图片" value="{{$image->path}}">
                                        <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="mobile_images[{{$key}}]"
                                         data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="layui-form-item" id="mobile-button">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" id="add-mobile-button"
                                    class="layui-btn layui-btn-primary layui-btn-sm">
                                增加图片 +
                            </button>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">

                    @foreach($meta as $item)
                        <div class="layui-form-item">
                            <label class="layui-form-label required">配置</label>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="attr[ident][]" class="layui-input" placeholder="配置标识"
                                           value="{{$item->meta_key}}">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" name="attr[value][]" class="layui-input" placeholder="配置值"
                                           value="{{$item->meta_value}}">
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="layui-form-item">
                        <label class="layui-form-label required">配置</label>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="attr[ident][]" class="layui-input" placeholder="配置标识"
                                       value="">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="attr[value][]" class="layui-input" placeholder="配置值"
                                       value="">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" id="diy-button">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" id="add-diy-button"
                                    class="layui-btn layui-btn-primary layui-btn-sm">
                                新增配置 +
                            </button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="hr-line"></div>
            <div class="layui-form-item text-center">
                <input type="hidden" name="id" value="{{$goods->id}}">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
            </div>
        </div>

    </form>
</div>

<div style="display: none" id="mobile-tpl">
    <div class="layui-card">
        <div class="layui-card-header">详情图片<a href="javascript:" style="color: #1e9fff;margin-left: 5px;"
                                                  class="delete-spec-item">[ - ]</a></div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label required">图片</label>
                <div class="layui-input-block layuimini-upload">
                    <input name="mobile_images[{num}]" class="layui-input layui-col-xs6" placeholder="请上传主图"
                           value="">
                    <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="mobile_images[{num}]" data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="display: none" id="albums-tpl">
    <div class="layui-card">
        <div class="layui-card-header">商品图册<a href="javascript:" style="color: #1e9fff;margin-left: 5px;"
                                                  class="delete-item">[ - ]</a></div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label required">图片</label>
                <div class="layui-input-block layuimini-upload">
                    <input name="goods_albums[{num}]" class="layui-input layui-col-xs6" placeholder="请上传商品图册"
                           value="">
                    <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="goods_albums[{num}]" data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="display: none" id="spec-tpl">
    <div class="layui-card">
        <div class="layui-card-header">商品规格项<a href="javascript:" style="color: #1e9fff;margin-left: 5px;"
                                                    class="delete-spec-item">[ - ]</a></div>
        <div class="layui-card-body">
            <div class="layui-form-item">

                <div class="layui-form-item">
                    <label class="layui-form-label required">规格名</label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="spec[{num}]" class="layui-input spec-item" data-num="{num}" placeholder="规格名称"
                                   value="">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">规格值</label>
                    <div class="layui-inline specVal">
                        <div class="layui-input-inline">
                            <input type="text" name="specVal[{num}][]" class="layui-input" placeholder="规格值"
                                   value="">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="specVal[{num}][]" class="layui-input" placeholder="规格值"
                                   value="">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button type="button" class="add-spec-val-btn layui-btn layui-btn-primary layui-btn-sm">
                            新增规格值
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div style="display: none" id="diy-tpl">
    <div class="layui-form-item meta-item">
        <label class="layui-form-label required">配置</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="attr[ident][]" class="layui-input" placeholder="配置标识" value="">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="attr[value][]" class="layui-input" placeholder="配置值" value="">
            </div>
        </div>
    </div>
</div>

<div style="display: none" id="extend-tpl">
    <div class="layui-form-item meta-item">
        <label class="layui-form-label required">配置</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="attr[ident][]" class="layui-input" placeholder="配置标识" value="{ident}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="attr[value][]" class="layui-input" placeholder="配置值" value="{value}">
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        $('#add-diy-button').click(
            function () {
                var html = $('#diy-tpl').html();
                $('#diy-button').before(html);
            }
        );

        form.on('select(category_id)', function (data) {
            $.get(
                "{!! myRoute('shop.category.metaToGoods') !!}?id=" + data.value,
                function (result) {

                    var html = '';
                    $('.layui-tab-item .meta-item').remove();

                    for (var i in result['data']) {
                        var obj = result['data'][i];
                        html += $('#extend-tpl').html().replace("{ident}", obj.meta_key).replace("{value}", obj.meta_value);
                    }

                    $('#diy-button').before(html);
                }
            );
        });

    });
</script>

</body>
</html>
